<template>
  <div class="map-page">
    <dv-border-box-8 style="height: 99px">
      <div class="data-box-line">
        <div v-for="(item, index) in data" :key="index" class="data-item">
          <div class="text">
            <dv-digital-flop :config="item" style="height: 47px" />
          </div>
          <div class="desc">{{ item.desc }}</div>
          <div v-if="index < data.length - 1" class="line"></div>
        </div>
      </div>
    </dv-border-box-8>
    <div class="map-view">
      <div class="time-view">
        <Select :options="YeardataList" v-model="time" @change="timeChecked" />
      </div>
      <MapChina :time="time" :companyLabFlag="companyLabFlag" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps } from "vue"
import MapChina from "./MapChina.vue"
import API from '@/common/api'
import Select from '@/components/Select.vue'
const YeardataList = ref([])
const time = ref('')
const props = defineProps({
  companyLabFlag: {
    type: Number,
    default: 0
  },
})

const timeChecked = (time) => {
  GetHeadOfficeDataCylindricalChart()
}
const data = ref([
])
const GetHeadOfficeDataCylindricalChart = async () => {
  const info = localStorage.getItem('info')
  if (info) {
    const json = JSON.parse(info)
    const params = {
      TestMainId: time.value,
      LabFlag: props.companyLabFlag,//  传 1 总部的领导驾驶舱 
      LabId: json.Id, //登录返回的  实验室分类
      LabType: json.LabType, //登录返回的
      LabName: json.ShortName,//登录返回的，传入ShortName，名字比较短
    }
    const res: any = await API.GetHeadOfficeDataCylindricalChart(params)
    if (res.Tag) {
      let list = []
      list.push({
        CompanyName: "总实验室数",
        TotalCount: res.Data.TotalCompanyCount
      })
      list = list.concat(res.Data.CompanyCount)
      data.value = list.map((e) => {
        const item = {
          number: [e.TotalCount],
          content: "{nt}",
          desc: e.CompanyName,
          style: {
            fontSize: 34,
            fill: "#ffffff",
            fontWeight: "bold",
          },
        }
        return item
      })

    }
  }
}
onMounted(() => {
  const data = localStorage.getItem('info')
  if (data) {
    const datatem = JSON.parse(data)
    YeardataList.value = datatem.Yeardata.map((e) => {
      const item = {
        label: e.TestYear,
        value: e.TestMainId
      }
      return item
    })
  }
  time.value = YeardataList.value[0].value
  GetHeadOfficeDataCylindricalChart()
})
</script>

<style lang="scss" scoped>
.map-page {
  height: 100%;

  .data-box-line {
    display: flex;
    margin-top: 15px;
    width: 100%;
    height: 99px;
    background: rgba(11, 179, 242, 0.44);
    border: 1px solid #2d99ff;

    .data-item {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .desc {
        font-size: 15px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        line-height: 20px;
      }

      .line {
        right: -2px;
        position: absolute;
        width: 2px;
        height: 28px;
        background: #d8d8d8;
      }
    }
  }

  .map-view {
    height: calc(100% - 99px);
    overflow: hidden;
    position: relative;

    .time-view {
      position: absolute;
      left: 0;
      top: 20px;
    }
  }
}
</style>
